<template>
  <el-row>

    <!--  每日黑广播统计  -->
    <el-row>
      <Elcard>
        <div slot="header">
          <span>每日黑广播统计</span>
          <el-button
              type="primary"
              size="mini"
              style="float:right;"
              @click="flushChartData"
          >刷新数据
          </el-button>
        </div>
        <el-row style="height: 35vh">
          <EveryDayLine
              :title="''"
              :current-data="allDataList"
              :loading="loading"
              :start-day="startDay"
          />
        </el-row>
      </Elcard>
    </el-row>

    <el-row
        :gutter="15"
        style="margin-top: 2vh"
    >
      <!--   年统计   -->
      <el-col :span="8">
        <Elcard>
          <div slot="header">
            <span>年统计</span>
            <el-button
                type="primary"
                size="mini"
                style="float: right"
                @click="yearCountVisiable=true"
            >
              查看详情
            </el-button>
          </div>
          <el-row style="height: 30vh">
            <yearCount
                :title="''"
                chart-name="年统计"
                :current-data="yearCountData"
                :loading="loading"
            />
          </el-row>
        </Elcard>
      </el-col>

      <!-- 月统计 -->
      <el-col :span="8">
        <Elcard>
          <div slot="header">
            <span>月统计</span>
            <el-button
                type="primary"
                size="mini"
                style="float: right"
                @click="monthCountVisiable=true"
            >
              查看详情
            </el-button>
          </div>
          <el-row style="height: 30vh">
            <yearCount
                :title="''"
                chart-name="月统计"
                :current-data="monthCountData"
                :loading="loading"
            />
          </el-row>
        </Elcard>
      </el-col>

      <!--   日统计   -->
      <el-col :span="8">
        <Elcard>
          <div slot="header">
            <span>日统计</span>
            <el-button
                type="primary"
                size="mini"
                style="float: right"
                @click="dayCountVisiable=true"
            >
              查看详情
            </el-button>
          </div>
          <el-row style="height: 30vh">
            <yearCount
                :title="''"
                chart-name="日统计"
                :current-data="dayCountData"
                :loading="loading"
            />
          </el-row>
        </Elcard>
      </el-col>
    </el-row>

    <!--  弹窗  -->

    <!--  年统计  -->
    <Dialog
        :visiable="yearCountVisiable"
        @close="yearCountVisiable=false"
        :info="{title:'年统计',width:'55%'}"
    >
      <el-row style="height: 55vh">
        <yearCount
            :title="''"
            chart-name="年统计"
            :current-data="yearCountData"
            :loading="loading"
        />
      </el-row>
    </Dialog>

    <!--  月统计  -->
    <Dialog
        :visiable="monthCountVisiable"
        @close="monthCountVisiable=false"
        :info="{title:'月统计',width:'55%'}"
        :loading="loading"
    >

      <el-row style="height: 55vh">
        <yearCount
            :title="''"
            chart-name="月统计"
            :current-data="monthCountData"
            :loading="loading"
        />
      </el-row>
    </Dialog>

    <!--  日统计  -->
    <Dialog
        :visiable="dayCountVisiable"
        @close="dayCountVisiable=false"
        :info="{title:'日统计',width:'55%'}"
    >

      <el-row style="height: 55vh">
        <yearCount
            :title="''"
            chart-name="日统计"
            :current-data="dayCountData"
            :loading="loading"
        />
      </el-row>
    </Dialog>

  </el-row>
</template>

<script>
// ---------------- axios -------------------
import {getChartData, flushChartData} from "../../../../api/bigData";
// --------------- element-ui -------------------
import Elcard from "../../../../components/element-ui/elCard"
import Dialog from "../../../../components/element-ui/dialog";
// --------------- echarts --------------------
import EveryDayLine from "./echarts/EveryDayLine";
import yearCount from "./echarts/yearCount";

export default {
  components: {
    Elcard,
    EveryDayLine,
    yearCount,
    Dialog
  },
  data() {
    return {
      // ------------ 弹窗 ---------------
      yearCountVisiable: false,
      monthCountVisiable: false,
      dayCountVisiable: false,
      //   ----------- 图表数据 --------------
      loading: false,
      yearCountData: [],
      monthCountData: [],
      dayCountData: [],
      allDataList: [],
      startDay: undefined
    }
  },
  methods: {
    // ------------- axios ----------------

    /**
     * 获取图表数据
     * */
    getChartData: function () {
      const pd = {}
      this.loading = true;
      getChartData(pd)
          .then(res => {
            this.loading = false;
            let yearData = res.data.data.chart_data.year_count;
            let MonthData = res.data.data.chart_data.month_count;
            let DayData = res.data.data.chart_data.day_count;
            let Category = res.data.data.chart_data.category;
            let allData = res.data.data.chart_data.data_list;
            this.startDay = res.data.data.start_day;
            this.makeYearCount(yearData);
            this.makeMonthCount(MonthData);
            this.makeDayCount(DayData);
            this.allDataList = allData;
            this.$emit("getCategoryData", Category);
          })
          .catch(err => {
            this.loading = false;
            console.error(err)
          })
    },

    flushChartData: function () {
      let pd = {
        type: "chart"
      }
      this.loading = true;
      flushChartData(pd)
          .then(res => {
            this.$message.success("刷新成功");
            this.loading = false;
            let yearData = res.data.data.year_count;
            let MonthData = res.data.data.month_count;
            let DayData = res.data.data.day_count;
            let allData = res.data.data.data_list;
            this.makeYearCount(yearData);
            this.makeMonthCount(MonthData);
            this.makeDayCount(DayData);
            this.allDataList = allData;
          })
          .catch(err => {
            this.loading = false;
            console.error(err)
          })
    },
    //   ---------------- 处理 --------------------

    /**
     * 处理年统计数据
     * @param val
     */
    makeYearCount: function (val) {
      let content = []
      for (let i = 0; i < val.length; i++) {
        let info = {
          name: this.formatMonth(i),
          value: val[i]
        }
        content.push(info);
      }
      this.yearCountData = content;
    },

    /**
     * 处理月统计数据
     * @param val
     */
    makeMonthCount: function (val) {
      let content = []
      for (let i = 0; i < val.length; i++) {
        let info = {
          name: `${i + 1}日`,
          value: val[i]
        }
        content.push(info);
      }
      this.monthCountData = content;
    },

    /**
     * 处理日统计数据
     * @param val
     */
    makeDayCount: function (val) {
      let content = []
      for (let i = 0; i < val.length; i++) {
        let info = {
          name: this.formatHourRange(i),
          value: val[i]
        }
        content.push(info);
      }
      this.dayCountData = content;
    },
    // --------------- 数据格式 ------------------
    /**
     * 格式化月份
     * @param val
     * @returns {string}
     */
    formatMonth: function (val) {
      switch (val) {
        case 0:
          return "一月"
        case 1:
          return "二月"
        case 2:
          return "三月"
        case 3:
          return "四月"
        case 4:
          return "五月"
        case 5:
          return "六月"
        case 6:
          return "七月"
        case 7:
          return "八月"
        case 8:
          return "九月"
        case 9:
          return "十月"
        case 10:
          return "十一月"
        case 11:
          return "十二月"
        default:
          return ""
      }
    },
    /**
     * 格式化小时范围
     * @param val
     * @returns {string}
     */
    formatHourRange: function (val) {
      switch (val) {
        case 0:
          return "00:00-01:00"
        case 1:
          return "01:00-02:00"
        case 2:
          return "02:00-03:00"
        case 3:
          return "03:00-04:00"
        case 4:
          return "04:00-05:00"
        case 5:
          return "05:00-06:00"
        case 6:
          return "06:00-07:00"
        case 7:
          return "07:00-08:00"
        case 8:
          return "08:00-09:00"
        case 9:
          return "09:00-10:00"
        case 10:
          return "10:00-11:00"
        case 11:
          return "11:00-12:00"
        case 12:
          return "12:00-13:00"
        case 13:
          return "13:00-14:00"
        case 14:
          return "14:00-15:00"
        case 15:
          return "15:00-16:00"
        case 16:
          return "16:00-17:00"
        case 17:
          return "17:00-18:00"
        case 18:
          return "18:00-19:00"
        case 19:
          return "19:00-20:00"
        case 20:
          return "20:00-21:00"
        case 21:
          return "21:00-22:00"
        case 22:
          return "22:00-23:00"
        case 23:
          return "23:00-00:00"
        default:
          return ""
      }
    },
  },
  created() {
    this.getChartData();
  }
}
</script>

<style scoped>

</style>